<template>
 
    <div>
      <div class="input">
        <h1>留言板</h1>
        <input type="text" id v-model="values">
        <button @click="find">发布</button>
        <button @click="res">倒排</button>
        <br>
        <ul v-for="(item,i) in arr" :key="i">
          <li>第{{ i+1 }}条：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item }}</li>
        </ul>
       </div>
  </div>
</template>

<script>

export default {
   data() {
    return {
      values:"",
      arr:[
      ]
   
    }
   },
   methods:{
      find(){
         this.arr.push(this.values)
      },
      res(){
        if(this.arr.length==0){
          alert("请输入内容，再查看")
          return
        }
         this.arr.reverse()
      }
   }
   
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
span{
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}
input{
  border: 1px solid #ff6700;
  widows: 700px;
  height: 25px;
  outline: none;
}
   button{
     width: 50px;
     height: 30px;

   }  
</style>